<template>
  <view class="body">
    <view class="top_bg">
      <image :src="ossImg('integral/consulting_top.png')"></image>
    </view>

    <view class="list">
      <view
        class="item"
        v-for="(item, index) in listData"
        :key="index"
        @click.stop="toWebView(item, index)"
      >
        <image :src="item.imgUrl"></image>
      </view>
    </view>
  </view>

  <view class="bg_icon">
    <image :src="ossImg('integral/bg_oreo.png')"></image>
  </view>

  
</template>

<script setup>
import { ossImg } from "@/utils/utils";
import { taskReward } from "@/services/integral";
import { onShow, onUnload, onHide } from "@dcloudio/uni-app";
import privacyPopup from "@/components/privacy-popup";

let enterTime = "";
let outTime = "";
let stayTime = "";

onShow(() => {
  // 用户进入时间
  enterTime = new Date();
  getApp().accessLogAdd();
});

onHide(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime.getTime() - enterTime.getTime()) / 1000;

  getApp().emdlz(
    "track",
    "event",
    "points_campaign_oreo_page",
    "view",
    "points_campaign_oreo_page",
    stayTime
  );
});

onUnload(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime.getTime() - enterTime.getTime()) / 1000;
  getApp().emdlz(
    "track",
    "event",
    "points_campaign_oreo_page",
    "view",
    "points_campaign_oreo_page",
    stayTime
  );
});

const listData = [
  {
    linkUrl: "https://mp.weixin.qq.com/s/jV_zee4ky2BtdXiv0CKDGw",
    imgUrl: ossImg("others/consulting/consulting1.png"),
    title: "居家快乐秘诀，小饼干告诉你！",
  },
  {
    linkUrl: "https://mp.weixin.qq.com/s/gBpVidndxRm7B3F_9oqKVw",
    imgUrl: ossImg("others/consulting/consulting2.jpg"),
    title: "你错过的春天，奥利奥打包带给你",
  },
  {
    linkUrl: "https://mp.weixin.qq.com/s/52u4dZbP-Dj-43tWrdmbNQ",
    imgUrl: ossImg("others/consulting/consulting3.png"),
    title: "看！春天的小仙女在吃什么？",
  },
  {
    linkUrl: "https://mp.weixin.qq.com/s/mt48gBe3AXnUMY4FTI1psQ",
    imgUrl: ossImg("others/consulting/consulting4.png"),
    title: "冬天的第一块奥利奥，是什么味儿的？",
  },
  {
    linkUrl: "https://mp.weixin.qq.com/s/5MXzDqThB9gNo-vqOzGo-w",
    imgUrl: ossImg("others/consulting/consulting5.png"),
    title: "宅家刷朋友圈为什么越刷越饿？",
  },
  {
    linkUrl: "https://mp.weixin.qq.com/s/Q0gjsMg4pfFrwDuTwpXPpQ",
    imgUrl: ossImg("others/consulting/consulting6.png"),
    title: "玩（吃）遍大江南北，一盒奥利奥就Go了！",
  },
  {
    linkUrl: "https://mp.weixin.qq.com/s/k8pmC5enMKIepPQBF6J1Vg",
    imgUrl: ossImg("others/consulting/consulting7.png"),
    title: "秋天的第一轮圆月，可能是奥利奥味的！",
  },
  {
    linkUrl: "https://mp.weixin.qq.com/s/9YNWTcpV76_WPQplPG1-0Q",
    imgUrl: ossImg("others/consulting/consulting8.png"),
    title: "如何三分钟速成甜品师？",
  },
  {
    linkUrl: "https://mp.weixin.qq.com/s/h-c2n8zHoszyvlv9-T4eUA",
    imgUrl: ossImg("others/consulting/consulting9.png"),
    title: "奥利奥有多会搭？别问，问就是百搭！",
  },
];

const toWebView = (item, index) => {
  getApp().emdlz(
    "track",
    "event",
    "points_campaign_oreo_page",
    "click",
    `banner_article_${index}_${item.title}`,
    ""
  );

  linkTo(
    item,
    index,
    "/pages/webView/webview?webSrc=" +
      item.linkUrl +
      "&titleName=" +
      "奥利奥资讯"
  );
};

const linkTo = async (item, index, url) => {
  getApp().emdlz(
    "track",
    "event",
    "points_campaign_oreo_page",
    "click",
    `banner_article_${index + 1}_${item.title}`,
    ""
  );
  const res = await taskReward();
  if (res?.code === 200) {
    setTimeout(() => {
      uni.navigateTo({ url });
    });
  }
};
</script>
<style lang="less" scoped>
.body {
  position: relative;
  width: 100%;
  z-index: 99;

  .top_bg {
    width: 100%;
    height: 224px;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .list {
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    .item {
      width: 345px;
      height: 160px;
      background-color: #f5f8fd;
      position: relative;
      border-radius: 8px;
      box-shadow: 0px 8px 21px 3px rgba(160, 160, 160, 0.63);
      margin-top: 20px;

      image {
        width: 100%;
        height: 100%;
      }

      .item_bottom {
        width: 100%;
        box-sizing: border-box;
        height: 22px;
        line-height: 22px;
        background-color: #000000;
        position: absolute;
        bottom: 0;
        color: #fff;
        opacity: 0.68;
        padding: 0 11px;
        font-size: 12px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
      }
    }
  }
}

.bg_icon {
  position: absolute;
  right: 0;
  top: 112.5px;
  width: 168px;
  height: 203px;
  z-index: 1;

  image {
    width: 100%;
    height: 100%;
  }
}
</style>
<style>
page {
  background-color: #fff !important;
}
</style>